<p><font color="#100E16"><br>&lt;!DOCTYPE html&gt;
</font></p>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
<title>网页组件分享</title>
<meta charset="UTF-8">         
<style>
:root {
--bg: hsl(260, 24%, 7%);
--odd: hsl(259, 27%, 15%);
--even: hsl(258, 28%, 20%);
--border: hsl(259, 27%, 9%);
--tableText: hsl(0, 0%, 94%);
--tableTextH: hsl(259, 25%, 40%);
}

body {
background: hsl(260, 24%, 7%);
}

main, .util {
margin: 30px 20%;
display: grid;
grid-gap: 40px;
}

input[type="file"] {
color: hsl(260, 24%, 67%);
text-indent: 10px;
}

input[type="search"] {
color: var(--tableTextH);
background: hsl(259, 27%, 13%);
border: none;
padding: 10px 20px;
border-radius: 1px;
font-size: 1.1rem;
}

table {
color: var(--tableText);
border: 1px solid var(--odd);
border-collapse: collapse;
}

th {
font-size: 1.3rem;
text-align: left;
color: var(--tableTextH);
background: hsl(259, 27%, 13%);
padding: 10px 20px;
}

td {
font-size: 1.1rem;
line-height: 1.7;
padding: 10px 20px;
border: 1px solid var(--border);
}

td.name {
text-align: left;
width: 30%;
color: #D3D3D3;
}

td.lead {
border-left: solid 3px hsl(225, 100%, 65%);
}

tr:nth-child(odd) {
background: var(--odd);
}

tr:nth-child(even) {
background: var(--even);
}

[hidden] {
display: none !important;
}

@media (max-width: 760px) {
body {
margin: 20px 50px 200px;
}
}

a:link{

text-decoration:none;

color:#3FA6D8;

}

  a:hover

  {

  text-decoration:underline;

color:#FF4081;

  }

  a:visited{

  color:darkyellow;

  text-decoration:none;

  }

  a:active

  {color:blue;}
</style>
</head>
<body>

<template id="table-reset">
    <tr>
        <th>标题</th>
        <th>描述</th>
    </tr>
</template>
<template id="table-row-template">
    <tr>
        <td class="name"><abbr class="abbr" title></abbr></td>
        <td><a class="desc" href="#" target="_blank">点我下载</a></td>
    </tr>
</template>
<div class="util">
    <input id="myfiles" type="file" accept="application/json" class="left">
    <input id="myInput" type="search" onkeyup="search()" placeholder=" 输入感兴趣的关键字">
</div>
<main class="main">
    <table id="table" data-toggle>
        <tr>
            <th>标题</th>
            <th>链接</th>
        </tr>
    </table>
</main>
<script>
const table = document.getElementById("table");
const fileUploader = document.querySelector("#myfiles");

fileUploader.setAttribute("hidden", true);

const search = () => {
const filter = myInput.value.toLowerCase();
const rows = table.querySelectorAll("tr");
rows.forEach(row => {
const nested = row.querySelectorAll("td");
const [columnA, columnB] = (nested.length === 2) ? [nested[0].textContent, nested[1].textContent] : ["", ""];
// set search column
const result = columnA.toLowerCase();
row.style.display = (result.indexOf(filter) > -1) ? "" : "none";
});
}

const checkTable = () => {
const el = document.querySelector("[data-toggle]");
if (el.hasAttribute("data-active")) {
el.textContent = "";
const fragment = document.getElementById("table-reset");
const instance = document.importNode(fragment.content, true);
el.appendChild(instance);
} else el.setAttribute("data-active", true);
}

const pullfiles = function() {
const fileInput = fileUploader;
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(evt) {
handleJSON(evt.target.result);
};
reader.readAsText(file);
}

function handleJSON(objectArray) {
checkTable();
const abbr_enabled = false;
const sections = JSON.parse(objectArray);
const fragment = document.getElementById("table-row-template");
sections.forEach(section => {
section.items.forEach(item => {
const instance = document.importNode(fragment.content, true);
//if (item === section.items[0])
//instance.querySelector(".name").classList = "name lead";
// enable html abbreviation tags
if (abbr_enabled) {
instance.querySelector(".abbr").textContent = item.name;
instance.querySelector(".abbr").title = item.desc;
} else
instance.querySelector(".name").textContent = item.name;
var url = window.location.href;

instance.querySelector(".desc").textContent = url+item.desc.split("|")[1];

instance.querySelector(".desc").href =url+item.desc.split("|")[0];
table.appendChild(instance);
});
});
}

fileUploader.onchange = pullfiles;



/* JSON TEMPLATE
[{
"name": "section-name",
"items": [{
"name": "item-name",
"desc": "description"
}]
}]
*/



/* DEFAULT TABLE DATA - (The majority of this data was sourced from https://en.wikipedia.org/w/index.php?title=List_of_computing_and_IT_abbreviations&oldid=907152883) */
handleJSON(`[{"name":"0–9","items":[{"name":"Bootstrap侧边栏","desc":"Bootstrap侧边栏.rar|Bootstrap侧边栏.rar"},{"name":"网页打印","desc":"网页打印.rar|网页打印.rar"},{"name":"鼠标CAD效果","desc":"鼠标CAD效果.rar|鼠标CAD效果.rar"},{"name":"颜色选择器","desc":"颜色选择器.rar|颜色选择器.rar"},{"name":"省市区三级联动","desc":"省市区三级联动.rar|省市区三级联动.rar"},{"name":"动态数字时钟","desc":"动态数字时钟.rar|动态数字时钟.rar"},{"name":"自定义弹窗","desc":"自定义弹窗.rar|自定义弹窗.rar"},{"name":"弹出登录框","desc":"弹出登录框.rar|弹出登录框.rar"},{"name":"下拉导航菜单","desc":"下拉导航菜单.rar|下拉导航菜单.rar"},{"name":"解决方案滚动布局","desc":"解决方案滚动布局.rar|解决方案滚动布局.rar"},{"name":"列表滚动切换","desc":"列表滚动切换.rar|列表滚动切换.rar"},{"name":"线性发光的爱心","desc":"线性发光的爱心.rar|线性发光的爱心.rar"},{"name":"圆饼导航菜单布局","desc":"圆饼导航菜单布局.rar|圆饼导航菜单布局.rar"},{"name":"网络云结构图标","desc":"网络云结构图标.rar|网络云结构图标.rar"},{"name":"炫酷3D登录后台","desc":"炫酷3D登录后台.rar|炫酷3D登录后台.rar"},{"name":"ultra","desc":"ultra.exe|ultra.exe"},{"name":"jquery压缩","desc":"jquery-3.4.1.min.js|jquery-3.4.1.min.js"},{"name":"jquery未压缩","desc":"jquery-3.4.1.js|jquery-3.4.1.js"},{"name":"jquery其他版本下载","desc":"jquery_link.txt|jquery_link.txt"},{"name":" bootstrap的js压缩版","desc":"bootstrap.min.js|bootstrap.min.js"},{"name":"bootstrap的js未压缩版","desc":"bootstrap.js|bootstrap.js"},{"name":"bootstrap的css压缩版","desc":"bootstrap.min.css|bootstrap.min.css"},{"name":"bootstrap的css未压缩版","desc":"bootstrap.css|bootstrap.css"},{"name":"bootstrap其他版本下载","desc":"bootstrap_link.txt|bootstrap_link.txt"},{"name":"vue下载","desc":"vue_link.txt|vue_link.txt"},{"name":"angular下载","desc":"angular_link.txt|angular_link.txt"},{"name":"react下载","desc":"react_link.txt|react_link.txt"},{"name":"MiniDialog","desc":"MiniDialog.rar|MiniDialog.rar"},{"name":"layui后台模板","desc":"layui后台模板.rar|layui后台模板.rar"},{"name":"font-awesome-4.7.0","desc":"font-awesome-4.7.0.zip|font-awesome-4.7.0.zip"},{"name":"基于Bootstrap的mansory网格瀑布流布局插件","desc":"基于Bootstrap的mansory网格瀑布流布局插件.rar|基于Bootstrap的mansory网格瀑布流布局插件.rar"},{"name":"基于SVG的js圆形菜单插件","desc":"基于SVG的js圆形菜单插件.rar|基于SVG的js圆形菜单插件.rar"},{"name":"响应式的博客资源网站管理后台模板","desc":"响应式的博客资源网站管理后台模板.rar|响应式的博客资源网站管理后台模板.rar"},{"name":"企业员工客户办公管理系统模板","desc":"企业员工客户办公管理系统模板.rar|企业员工客户办公管理系统模板.rar"},{"name":"液状弯曲流体canvas背景特效","desc":"液状弯曲流体canvas背景特效.rar|液状弯曲流体canvas背景特效.rar"},{"name":"响应式后台管理网站模板","desc":"响应式后台管理网站模板.rar|响应式后台管理网站模板.rar"},{"name":"星光灿烂的粒子动画","desc":"星光灿烂的粒子动画.rar|星光灿烂的粒子动画.rar"},{"name":"粒子按钮","desc":"粒子按钮.rar|粒子按钮.rar"},{"name":"canvas彩虹旋转隧道","desc":"canvas彩虹旋转隧道.rar|canvas彩虹旋转隧道.rar"},{"name":"牛顿画笔","desc":"牛顿画笔.rar|牛顿画笔.rar"},{"name":"时间沙漏","desc":"时间沙漏.rar|时间沙漏.rar"},{"name":"粒子波浪","desc":"粒子波浪.rar|粒子波浪.rar"},{"name":"粒子文字","desc":"粒子文字.rar|粒子文字.rar"},{"name":"简单的星空粒子效果","desc":"简单的星空粒子效果.rar|简单的星空粒子效果.rar"},{"name":"jQuery背景动画效果","desc":"jQuery背景动画效果.rar|jQuery背景动画效果.rar"},{"name":"动态星空canvas特效","desc":"动态星空canvas特效.rar|动态星空canvas特效.rar"},{"name":"超炫背景粒子插件particles.js","desc":"超炫背景粒子插件particles.js.rar|超炫背景粒子插件particles.js.rar"},{"name":"HTML5制作3D樱花漫天飞舞","desc":"HTML5制作3D樱花漫天飞舞.rar|HTML5制作3D樱花漫天飞舞.rar"},{"name":"颜色选择器","desc":"颜色选择器.exe|颜色选择器.exe"},{"name":"卸载","desc":"卸载.exe|卸载.exe"},{"name":"jQuery粒子系统插件Particleground","desc":"jQuery粒子系统插件Particleground.rar|jQuery粒子系统插件Particleground.rar"},{"name":"PP文章伪原创洗稿降重助手","desc":"PP文章伪原创洗稿降重助手.zip|PP文章伪原创洗稿降重助手.zip"},{"name":"layui-v2.5.6","desc":"layui-v2.5.6.zip|layui-v2.5.6.zip"}]}]`);
</script>
</body>
</html>